<template>
    <div class="forgot-password-page">
        <TopTitleExit title="" :exit="routerExit" bg="#00000000" position="fixed"></TopTitleExit>
        <div class="forgot-password-container">
            <div class="logo-line">
                <div class="icon" style="--icon: url(/logo-transparent.png);"></div>
                <div class="website-name">StockPro</div>
            </div>
            <div class="white-list">
                <div class="white-box" v-show="step == 1">
                    <div class="hello-line">
                        <div class="hello">Forgot password?</div>
                        <div class="text">Reset in 2 steps!</div>
                    </div>
                    <div class="input-box">
                        <div class="input-item">
                            <div class="input-name">Email address</div>
                            <div class="input-line">
                                <div class="icon" style="--icon: url(/icon/login/admin.svg)"></div>
                                <input type="text" placeholder="you@example.com" v-model="account" />
                            </div>
                            <!-- <div class="input-error" :style="`opacity: ${ form_error.account.show_error ? 1 : 0 }`">{{ form_error.account.error_text }}</div> -->
                        </div>
                        <div class="bottom-box">
                            <div class="btn-box">
                                <div class="btn register-btn" @click="nextToVerifyEmail">Next</div>
                                <!-- <div class="btn register-btn" @click="register">Sign Up</div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="white-box" v-show="step == 2">
                    <div class="hello-line">
                        <div class="hello">Verify email</div>
                        <div class="text">Check inbox for the 5-digit code.</div>
                    </div>
                    <div class="input-box">
                        <div class="input-item">
                            <div class="verify-code-box">
                                <input type="text" v-model="verifyCode" maxlength="5" />
                                <div class="code-item">{{ verifyCode[0] }}</div>
                                <div class="code-item">{{ verifyCode[1] }}</div>
                                <div class="code-item">{{ verifyCode[2] }}</div>
                                <div class="code-item">{{ verifyCode[3] }}</div>
                                <div class="code-item">{{ verifyCode[4] }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="btn-box">
                        <div class="resend-btn" @click="resend" :style="`color: ${ can_resend_email_code ? '#fff' : 'var(--text-light-color)' }; background-color: ${ can_resend_email_code ? 'var(--active-color)' : '#fff' }`">{{ can_resend_email_code ? 'Resend' : 'Resend code in ' + show_remain_time }}</div>
                        <div class="return-btn" @click="back">Previous Step</div>
                    </div>
                </div>
                <div class="white-box" v-show="step == 3">
                    <div class="hello-line">
                        <div class="hello">Set new password</div>
                        <!-- <div class="text">Final step: set your password — done!</div> -->
                    </div>
                    <div class="input-box">
                        <div class="input-item">
                            <div class="input-name">Password</div>
                            <div class="input-line">
                                <div class="icon" style="--icon: url(/icon/login/password.svg)"></div>
                                <input type="password" placeholder="Enter your password" v-model="password" />
                            </div>
                            <!-- <div class="input-error" :style="`opacity: ${ form_error.password.show_error ? 1 : 0 }`">{{ form_error.password.error_text }}</div> -->
                        </div>
                        <div class="input-item">
                            <div class="input-name">Confirm Password</div>
                            <div class="input-line">
                                <div class="icon" style="--icon: url(/icon/login/password.svg)"></div>
                                <input type="password" placeholder="Confirm your password" v-model="confirmPassword" />
                            </div>
                            <!-- <div class="input-error" :style="`opacity: ${ form_error.confirmPassword.show_error ? 1 : 0 }`">{{ form_error.confirmPassword.error_text }}</div> -->
                        </div>
                        <div class="input-item">
                            <div class="input-name">Fund Password</div>
                            <div class="input-line">
                                <div class="icon" style="--icon: url(/icon/login/password.svg)"></div>
                                <input type="password" placeholder="Enter your fund password" v-model="fundPassword" />
                            </div>
                            <!-- <div class="input-error" :style="`opacity: ${ form_error.fundPassword.show_error ? 1 : 0 }`">{{ form_error.fundPassword.error_text }}</div> -->
                        </div>
                        <div class="input-item">
                            <div class="input-name">Confirm Fund Password</div>
                            <div class="input-line">
                                <div class="icon" style="--icon: url(/icon/login/password.svg)"></div>
                                <input type="password" placeholder="Confirm your fund password" v-model="confirmFundPassword" />
                            </div>
                            <!-- <div class="input-error" :style="`opacity: ${ form_error.confirmFundPassword.show_error ? 1 : 0 }`">{{ form_error.confirmFundPassword.error_text }}</div> -->
                        </div>
                    </div>
                    <div class="btn-box">
                        <div class="completed-btn" @click="completed">Complete</div>
                        <div class="return-btn" @click="back">Previous Step</div>
                    </div>
                </div>
            </div>
            <!-- <div class="login-box">
                <div class="login-line">
                    <div class="icon" style="--icon:url(/Logo-App-1024.png);"></div>
                </div>
                <div class="title">Forgot Password</div>
                <div class="input-box">
                    <div class="input-item">
                        <div class="input-name">Email address</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/admin.svg);" ></div>
                            <input type="text" placeholder="you@example.com" />
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-name">Set Login Password</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/password.svg);"></div>
                            <input type="password" placeholder="Input your new password" />
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-name">Confirm Password</div>
                        <div class="input-line">
                            <div class="icon" style="--icon: url(/icon/login/password.svg);"></div>
                            <input type="password" placeholder="Input confirm password" />
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <div class="btn login-btn">Next</div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
// import { account, password, authService } from '@/service/auth.js';
import { routerTo, routerExit } from '@/utils/jump';
import { ref, onMounted, computed, watch, onUnmounted } from 'vue';
// import { loading } from '@/service/status';
import { loading, toast } from '@/service/status';

// 仅仅用于定义步骤的含义 不运用到具体页面中
const step_list = [
    { id: 1, desc: '填写邮箱和邀请码' },
    { id: 2, desc: '验证邮箱' },
    { id: 3, desc: '设置密码和资金密码' },
];

// 表示当前处于哪一个步骤
const step = ref(1);

// 表示是否可以重新发送邮箱验证码
const can_resend_email_code = ref(false);

// 邮箱验证码
const verifyCode = ref('');

// 邮箱验证码发送时间
const verifyCode_send_time = ref(0);

// 显示剩余发送时间
const show_remain_time = computed(() => {
    let min = Math.floor(verifyCode_send_time.value / 60);
    let sec = Math.floor(verifyCode_send_time.value % 60);
    return `${ min < 10 ? '0' + min : min}:${ sec < 10 ? '0' + sec : sec}`;
});

// 监听邮箱验证码的位数
watch(verifyCode, () => {
    if (verifyCode.value.length == 5) {
        loading.value = true;
        setTimeout(() => {
            step.value = 3;
            loading.value = false;
        }, 500);
    }
});

// 下一步进入邮箱验证页面的函数
function nextToVerifyEmail() {
    loading.value = true;
    verifyCode.value = '';
    setTimeout(() => {
        step.value = 2;
        loading.value = false;
        can_resend_email_code.value = false;
        verifyCode_send_time.value = 10;
        toast.success('Verification code sent successfully');
    }, 500);
}

// 重新发送验证码的函数
function resend() {
    if (can_resend_email_code.value) {
        loading.value = true;
        setTimeout(() => {
            can_resend_email_code.value = true;
            verifyCode_send_time.value = 10;
            toast.success('Verification code sent successfully');
            loading.value = false;
        }, 500);
    }
}

// 返回上一个步骤的函数
function back() {
    step.value = 1;
}

// 确认密码提交的函数
function completed() {
    loading.value = true;
    setTimeout(() => {
        routerExit();
        loading.value = false;
        toast.success('Register successfully');
    }, 500);
}

let inter = null;

onMounted(() => {
    inter = setInterval(() => {
        if (verifyCode_send_time.value > 0) {
            verifyCode_send_time.value -= 1;
            can_resend_email_code.value = false;
        } else {
            can_resend_email_code.value = true;
        }
    }, 1000);
});

onUnmounted(() => {
    clearInterval(inter);
});

// const form_error = reactive({
//     account: {
//         show_error: false,
//         error_text: '',
//     },
//     password: {
//         show_error: false,
//         error_text: '',
//     },
// });

// async function login() {
//     let call = true;
//     if (account.value == '') {
//         form_error.account.show_error = true;
//         form_error.account.error_text = 'Please enter your email address';
//         call = false;
//     } else {
//         form_error.account.show_error = false;
//         form_error.account.error_text = '';
//     }
//     if (password.value == '') {
//         form_error.password.show_error = true;
//         form_error.password.error_text = 'Please enter your password';
//         call = false;
//     } else {
//         form_error.password.show_error = false;
//         form_error.password.error_text = '';
//     }
//     if (call) {
//         loading.value = true;
//         await authService.login();
//         loading.value = false;
//     }
// }
</script>

<style scoped lang="less">
.forgot-password-container {
    width: 100vw;
    height: 100vh;
    padding-top: 15vw;
    background-color: var(--bg-strong-color);
    display: flex;
    flex-direction: column;

    .logo-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5vw;

        .icon {
            --w: 16vw;
            --h: 16vw;
        }

        .website-name {
            font-size: 7vw;
            font-weight: 700;
        }
    }

    .white-list {
        width: 100%;
        flex: 1;
        margin-top: 10vw;
        border-radius: 8vw 8vw 0 0;
        background-color: #fff;
        box-shadow: 0 0 3vw rgba(0, 0, 0, 0.05);

        .white-box {
            box-sizing: border-box;
            width: 100%;
            padding: 10vw;
            display: flex;
            flex-direction: column;
            gap: 7vw;
    
            .hello-line {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3vw;
    
                .hello {
                    font-size: 6vw;
                    font-weight: 700;
                }
    
                .text {
                    font-size: 4vw;
                    font-weight: 400;
                }
            }

            
            .input-box {
                display: flex;
                flex-direction: column;
                gap: 1vw;
                margin: 2vw 0;
    
                .input-item {
                    display: flex;
                    flex-direction: column;
                    gap: 1vw;
    
                    .input-name {
                        font-size: 3.5vw;
                        color: var(--text-color);
                    }
    
                    .input-line {
                        box-sizing: border-box;
                        width: 100%;
                        height: 10vw;
                        display: flex;
                        align-items: center;
                        gap: 3.5vw;
                        background-color: #fff;
                        border: 0.1vw solid var(--border-color);
                        border-radius: 1.8vw;
                        padding: 3vw;
    
                        .icon {
                            --w: 4.5vw;
                            --h: 4.5vw;
                        }
    
                        input {
                            flex: 1;
                            border: none;
                            outline: none;
                            font-size: 3vw;
                        }
                    }
    
                    .input-error {
                        color: red;
                        font-size: 2.5vw;
                    }

                    .verify-code-box {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        gap: 2vw;
                        position: relative;

                        input {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            border: none;
                            outline: none;
                            opacity: 0;
                        }

                        .code-item {
                            --h: 15vw;
                            height: var(--h);
                            font-size: 7vw;
                            text-align: center;
                            line-height: var(--h);
                            border-bottom: 0.3vw solid var(--text-color);
                        }
                    }
                }
                
                .agree-box .checkbox-line {
                    display: flex;
                    align-items: center;
                    gap: 3vw;
                    margin-bottom: 0.5vw;
    
                    .text {
                        font-size: 3vw;
    
                        a {
                            font-size: 3vw;
                            text-decoration: none;
                            color: var(--active-color);
                        }
                    }
                }
            }

            .bottom-box {
                display: flex;
                flex-direction: column;
                gap: 3vw;
    
                .btn-box {
                    display: flex;
                    flex-direction: column;
                    gap: 3vw;
        
                    .btn {
                        --h: 9vw;
                        height: var(--h);
                        font-size: 3vw;
                        line-height: var(--h);
                        border-radius: 1.5vw;
                        text-align: center;
                    }
            
                    .register-btn {
                        margin-top: 3vw;
                        color: #fff;
                        background-color: #2563eb;
            
                        &:hover {
                            background-color: #1d4ed8;
                        }
                    }
                }
        
                .link-box .text {
                    margin-top: 1vw;
                    text-align: center;
                    font-size: 3vw;
        
                    span {
                        font-size: 3vw;
                        color: var(--active-color);
                    }
                }
            }

            .resend-btn {
                --h: 10vw;
                height: var(--h);
                font-size: 3.5vw;
                text-align: center;
                line-height: var(--h);
                border-radius: 2vw;
            }

            .completed-btn {
                --h: 10vw;
                height: var(--h);
                font-size: 3.5vw;
                text-align: center;
                line-height: var(--h);
                border-radius: 2vw;
                color: #fff;
                background-color: var(--active-color);
            }

            .return-btn {
                --h: 10vw;
                height: var(--h);
                margin-top: 3vw;
                font-size: 3vw;
                text-align: center;
                line-height: var(--h);
                border-radius: 2vw;
                color: var(--active-color);
                background-color: var(--active-light-color);
            }
        }
    }

    // .login-box {
    //     width: 75vw;
    //     display: flex;
    //     flex-direction: column;
    //     gap: 9vw;

    //     .login-line {
    //         display: flex;
    //         justify-content: center;
    //         align-items: center;

    //         .icon {
    //             --w: 16vw;
    //             --h: 16vw;
    //         }
    //     }

    //     .title {
    //         font-size: 6vw;
    //         font-weight: bold;
    //         text-align: center;
    //     }

    //     .input-box {
    //         display: flex;
    //         flex-direction: column;
    //         gap: 5vw;
    //         margin: 2vw 0;

    //         .input-item {
    //             display: flex;
    //             flex-direction: column;
    //             gap: 1vw;

    //             .input-name {
    //                 font-size: 3.5vw;
    //                 color: var(--text-color);
    //             }

    //             .input-line {
    //                 box-sizing: border-box;
    //                 width: 100%;
    //                 height: 10vw;
    //                 display: flex;
    //                 align-items: center;
    //                 gap: 3.5vw;
    //                 background-color: #fff;
    //                 border: 0.1vw solid var(--border-color);
    //                 border-radius: 1.8vw;
    //                 padding: 3vw;

    //                 .icon {
    //                     --w: 4.5vw;
    //                     --h: 4.5vw;
    //                 }

    //                 input {
    //                     flex: 1;
    //                     border: none;
    //                     outline: none;
    //                     font-size: 3vw;
    //                 }
    //             }

    //             .input-error {
    //                 color: red;
    //                 font-size: 2.5vw;
    //             }
    //         }
    //     }

    //     .btn-box {
    //         display: flex;
    //         flex-direction: column;
    //         gap: 3vw;

    //         .btn {
    //             --h: 9vw;
    //             height: var(--h);
    //             font-size: 3vw;
    //             line-height: var(--h);
    //             border-radius: 1.5vw;
    //             text-align: center;
    //         }

    //         .login-btn {
    //             color: #fff;
    //             background-color: #2563eb;

    //             &:hover {
    //                 background-color: #1d4ed8;
    //             }
    //         }
    
    //         .register-btn {
    //             color: #2563eb;
    //             background-color: #2563eb10;
    //         }
    //     }

    //     .link-box {
    //         display: flex;
    //         flex-direction: column;

    //         .link-item {
    //             font-size: 3vw;
    //             text-align: center;
    //             color: var(--text-color);

    //             span {
    //                 font-size: 3vw;
    //                 font-weight: 500;
    //                 color: var(--active-color);
    //             }
    //         }
    //     }
    // }
}
</style>